<template >
  <!-- 服务管理 -->
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="vsCode" :label="'标题：'">
          <Input
            type="text"
            v-model.trim="searchForm.wfTittle"
            :placeholder="'请输入'"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>
        <Form-item prop="vsCode" :label="'业务单元：'">
          <Select filterable clearable v-model="searchForm.trgNode">
            <Option v-for="item in bussinessUnit" :value="item" :key="item">{{
              item
            }}</Option>
          </Select>
        </Form-item>
        <Form-item prop="approverList" :label="'审批人：'">
          <Input
            type="text"
            v-model.trim="searchForm.approverList"
            :placeholder="'请输入'"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" ref='search' @click="searchValueSet()" />
        </Form-item>
      </Form>
    </SelfAdaption>

    <InnerPageTable ref="valueSetTable" :config="pageTableConfig" v-if='showTable'>

      <div slot="table-bar">
        <!-- <Dropdown style="margin-left: 20px">
          <Button type="primary">
              批量处理
              <Icon type="ios-arrow-down"></Icon>
          </Button>
          <template #list>
              <DropdownMenu @on-click="passFun">
                  <DropdownItem  @click.native="passFun(true)">批量通过</DropdownItem>
                  <DropdownItem  @click.native="rejectFun(false)">批量驳回</DropdownItem>
              </DropdownMenu>
          </template>
      </Dropdown> -->
      <!-- <RPButton optType="create" type="info" @click="batchApprove" text="批量审批" /> -->
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import { unhandledColumns, columnListUnhande } from './columns'
import todoApi from '../../../api/todoCender.js'
import coverApi from '@/api/cover.js'
import planEditAndDetail from '../../dataSummary/planEditAndDetail.vue'
import CoverRateEdit from '../../../components/ListView/CoverRateEdit.vue'
import CoverTargetEdit from '../../../components/ListView/CoverTargetEdit.vue'
import tableColumnSetting from '@/mixin/tableColumnSetting'
import {
  TABLE_TYPE_ID_PLAN,
  TABLE_TYPE_ID_STATUS,
  TABLE_TYPE_ID_TARGET,
  TABLE_TYPE_ID_RATE,
} from './const.js'
import { approvalMix } from '@/views/todoCenter/myApproval/approval-mix'
import approvalOpinion from '@/components/ListView/approvalOpinion'
export default {
  name: 'unhandled',
  mixins: [approvalMix, tableColumnSetting],
  data() {
    return {
      menuNo: 'unhandled',
      bussinessUnit: [],
      searchForm: {
        wfTittle: '',
        taskCode: '',
        trgNode: '',
        approverList: '',
      },
      columnList: columnListUnhande,
      pageTableConfig: {
        loadDataFn: this.getServiceList.bind(this),
        columns: unhandledColumns.bind(this)(),
        autoFirst: false ,//默认 就是 false, 要配置在这里
        onSelectionChange: this.onSelectionChange
      },
      ids:[],
      flags:false
    }
  },
  created() {
  },
  beforeMount: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
  methods: {
    init() {
      this.getBussinessUnit()
      // this.searchValueSet()
    },
    getBussinessUnit() {
      coverApi.getMyApprovalBussinessUnit().then(res => {
        this.bussinessUnit = res.data.data || []
        this.searchValueSet()
      })
    },
    onSelectionChange(selection) {
        this.ids = []
         selection.forEach(element => {
          this.ids.push({id: element.id, tableId: element.tableId})
         });
    },
      goDetail(row) {
        let viewList = [
          {
            tableTypeId: TABLE_TYPE_ID_PLAN,
            page: planEditAndDetail,
            type: 'plan',
            title: ''
          },
          {
            tableTypeId: TABLE_TYPE_ID_STATUS,
            page: CoverTargetEdit,
            type: 'status',
            title: '2022年数字化覆盖现状'
          },
          {
            tableTypeId: TABLE_TYPE_ID_TARGET,
            page: CoverTargetEdit,
            type: 'target',
            title: '“十四五”数字化覆盖目标'
          },
          {
            tableTypeId: TABLE_TYPE_ID_RATE,
            page: CoverRateEdit,
            type: 'rate',
            title: '数字化覆盖率计算表'
          }
        ]
        let obj = viewList.filter(item => item.tableTypeId == row.tableId)[0]
        if (obj) {
          new this.$sidelipPage(
              obj.page,
              {
                props: {
                  disabledPage: true,
                  id: row.id,
                  fromPage: 'Approver',
                  dataStatus: Number(row.wfStatus) || 2,
                  type: obj.type,
                  title: obj.title,
                  tableId: row.tableId,
                  submitFlag: row.submitFlag,
                }
              },
              data => {
                data && this.searchValueSet()
              }
          );
        }

    },
    changeStatus(row, types) {
        this.$Modal.confirm({
          render: (h) => {
              return h( 'div',
                {
                  class: 'icon-box'
                },
                [
                  h('Icon', {
                    props: {
                      type: types ? 'ios-checkmark-circle' : 'ios-alert'
                    }
                  }),
                  h('span', types ? '是否确定通过？': '是否确定驳回？'),
                  h('p', types ? '通过操作不可撤销，请谨慎操作。': '驳回操作不可撤销，请谨慎操作。'),
                ]
              )
          },
          onOk: () => {
            todoApi.changeRowStatus(row, types).then(() => {
              this.$Message.success({
                content: '操作成功',
                duration: 3
              });
              this.searchValueSet()
            })
          }
      })
    },
    getServiceList: tableObj => {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize, taskCode, wfTittle, trgNode, approverList } = param
      todoApi.getUnhandledTableList({
        currentPage: pageNum,
        pageSize,
        taskCode,
        wfTittle,
        trgNode,
        approverList,
        sortOrderBy: 'DESC',
        sortPropName: 'submit_date'
      }).then(res => {
        let { current, size, records, pages, total } = res.data.data
        responseProcess({
          pageNum: Number(current),
          size: Number(size),
          pages: pages,
          records: records || [],
          total: Number(total),
        });
      })
    },
    //搜索
    searchValueSet() {
      this.$refs['valueSetTable'].load(this.searchForm)
      this.$set(this.searchForm, 'taskCode', '')
    },
    //通过
    passFun(types = true){

     if(this.ids.length!==0){
        this.$Modal.confirm({
            render: (h) => {
                return h( 'div',
                  {
                    class: 'icon-box'
                  },
                  [
                    h('Icon', {
                      props: {
                        type: types ? 'ios-checkmark-circle' : 'ios-alert'
                      }
                    }),
                    h('span', types ? '是否确定通过？': '是否确定驳回？'),
                    h('p', types ? '通过操作不可撤销，请谨慎操作。': '驳回操作不可撤销，请谨慎操作。'),
                  ]
                )
            },
            onOk: () => {
                todoApi.getPass(this.ids).then(()=>{

                this.$Message.success({
                      content: '通过成功',
                      duration: 3
                    });
                this.searchValueSet()
                this.ids = []
              })
            }
        })

      }else{
        this.$Message.error({
           content:'请选择数据',
           duration: 3
        })
      }


    },
    rejectFun(types = false){
       if(this.ids.length!==0){
         this.$Modal.confirm({
            render: (h) => {
                return h( 'div',
                  {
                    class: 'icon-box'
                  },
                  [
                    h('Icon', {
                      props: {
                        type: types ? 'ios-checkmark-circle' : 'ios-alert'
                      }
                    }),
                    h('span', types ? '是否确定通过？': '是否确定驳回？'),
                    h('p', types ? '通过操作不可撤销，请谨慎操作。': '驳回操作不可撤销，请谨慎操作。'),
                  ]
                )
            },
            onOk: () => {
              todoApi.getReject(this.ids).then(()=>{
                this.$Message.success({
                        content: '驳回成功',
                        duration: 3
                      });
                  this.searchValueSet()
                  this.ids = []
              })
            }
        })

       }else{
        this.$Message.error({
           content:'请选择数据',
           duration: 3
        })
      }

    },
    batchApprove() {
      if(this.ids.length == 0) {
        this.$Message.error({
           content:'请选择数据',
           duration: 3
        })
      } else {
        new this.$pageModal(
          approvalOpinion,
          {
            props: {
            }
          },
          async (data) => {
            if (!data) return
              this.ids.forEach(e => {
                e.approverComments = data.approverComments
              })
              todoApi.batchApproval(this.ids, data.result == '通过' ? true : false).then(() => {
                this.$Message.success({
                  content: '操作成功',
                  duration: 3
                })
                this.searchValueSet()
                this.ids = []
              })
          }
        )
      }
    }
  },
  directives: {}
}
</script>
<style lang="less" scoped>
/deep/.table-bar button:last-child{
   color:#ffffff;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
}

</style>

<style lang="less">
.icon-box {
  line-height: 30px;
  .ivu-icon {
    font-size: 28px;
  }
  .ivu-icon-ios-checkmark-circle {
    font-size: 28px;
    color: #19be6b;
  }
  .ivu-icon-ios-alert {
    font-size: 28px;
    color: #f90;
  }
  span {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
  }
  p {
    margin-top: 10px;
    padding-left: 34px;
  }
  /deep/.ivu-btn-text {
    color: red;
    border: 1px solid transparent;
    // &:hover{
    //    border: 1px solid #ff6f4b
    // }
  }

}
</style>
